<template>
  <view class="pagination-container">
    <scroll-view
      class="scroll-view"
      scroll-y
      :lower-threshold="100"
      @scrolltolower="handleScrollToLower"
      @refresherrefresh="handleRefresherRefresh"
      :refresher-enabled="list.length > 0 && isEnableRefresh"
      :refresher-triggered="isRefreshing"
    >
      <slot name="list"></slot>
	  <view class="empty" v-if="list.length === 0">
		  <image src="../../static/img/empty.png" mode=""></image>
		  <text>暂无内容</text>
	  </view>
      <view v-if="loading" class="loading-more">加载中...</view>
      <view v-if="noMoreData && list.length" class="no-more-data">没有更多数据了</view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
  isEnableRefresh:{
	 type:Boolean,
	 default:false
  },
  list:{
	  type:Array,
	  default:()=>[]
  },
  loading: {
    type: Boolean,
    default: false
  },
  noMoreData: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['refresh', 'load-more']);

const isRefreshing = ref(false);

// 下拉刷新
const handleRefresherRefresh = () => {
  isRefreshing.value = true;
  if(props.list.length > 0){
	  emit('refresh');
  }
};

// 上拉加载更多
const handleScrollToLower = () => {
  if (!props.noMoreData && !props.loading) {
    emit('load-more');
  }
};
</script>

<style lang="scss" scoped>
.pagination-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scroll-view {
	height: 100%;
}

.loading-more,
.no-more-data {
  padding: 15px;
  text-align: center;
  font-size: 14px;
  color: #999;
}
.empty {
	height: calc(100vh - 800rpx);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	>image{
		width: 124rpx;
		height: 132rpx;
	}
	text{
		font-weight: 400;
		font-size: 28rpx;
		color: #44474A;
	}

}
</style>